<template>
  <div class="login-background">
    <div class="login">
      <el-row>
        <el-col :span="24">
          <div class="grid-content d6">账号密码登录</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <div class="grid-content lh">用户名：</div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content bg-purple-light">
            <el-input v-model="userName" placeholder="请输入内容"></el-input>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <div class="grid-content lh">密码：</div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content bg-purple-light">
            <el-input v-model="userPwd" placeholder="请输入密码" show-password></el-input>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="30">
          <el-button type="button" @click="login" class="d1">登录</el-button>
        </el-col>
      </el-row>
      <router-link to="/home" class="d7">去首页</router-link>
      <div class="denglv">
        <ol>
          <span class="logleft"></span>
          <p class="logmid">其他登录方式</p>
          <span class="logright"></span>
        </ol>
      </div>
      <div class="other">
        <span>
          <a href="https://graph.qq.com/oauth2.0/show?which=Login&display=pc&response_type=code&client_id=101417732&redirect_uri=http://wx01.lecake.com/customer/qq-callback.html&state=1f3dd8222df266f9507133107545601b&scope=get_user_info"
            class="QQ"></a>
          <p>QQ</p>
        </span>
        <span class="middle">
          <a href="https://open.weixin.qq.com/connect/qrconnect?appid=wx379340473ba5e673&redirect_uri=https%3A%2F%2Fwww.lecake.com%2Fcustomer%2Fwx-callback.html&response_type=code&scope=snsapi_login&state=state#wechat_redirect"
            class="weixin"></a>
          <p>微信</p>
        </span>
        <span>
          <a href="http://www.weibo.com" class="weibo"></a>
          <p>微博</p>
        </span>
      </div>
    </div>

  </div>
</template>
<style>
.login {
  position: relative;
  left: 25%;
  top: 10px;
}

.login-background {
  background: url(../../../images/backgroundlogin.jpg) no-repeat center;
  height: 650px;
  background-size: cover;
}

.denglv {
  position: relative;
  left: 10%;
}

ol {
  margin: auto;
  width: 400px;
  margin-top: 10px;
  margin-left: 17px;
  overflow: hidden;
  list-style: none;
}

.d7 {
  position: relative;
  left: 10%;
  top: 0px;
}

a {
  text-decoration: none;
  color: #666;
}

a:hover {
  color: red;
  text-decoration: none;
}

.logright {
  float: left;
  width: 80px;
  height: 1px;
  background-color: #d2d2d2;
  margin-top: 10px;
}

.logleft {
  float: left;
  width: 80px;
  height: 1px;
  background-color: #d2d2d2;
  margin-top: 10px;
}

.logmid {
  color: #4c4c4c;
  float: left;
  margin: 0 15px;
}

.other {
  margin: auto;
  margin-top: 30px;
  margin-left: 40px;
  overflow: hidden;
  position: relative;
  left: 20%;
}

.other span {
  float: left;
}

.other span p {
  font-size: 16px;
  color: #4c4c4c;
  margin-top: 5px;
  margin-left: 6px;
}

.QQ {
  display: block;
  width: 39px;
  height: 39px;
  background: url(../../../images/sprite.png) -716px 0px;
}

.middle {
  margin: 0 50px;
}

.weixin {
  display: block;
  width: 44px;
  height: 39px;
  background: url(../../../images/sprite.png) -756px 0px;
}

.weibo {
  display: block;
  width: 41px;
  height: 39px;
  background: url(../../../images/sprite.png) -804px 0px;
}

.grid-content {
  margin-top: 10px;
  /* float: left; */
}
</style>
<script>

export default {
  name: 'LoginView',
  data() {
    return {
      userName: "",
      userPwd: ""
    }
  },
  methods: {
    login() {
      if (this.userName.length == 0 || this.userPwd.length == 0) {
        this.$message('用户名或密码不能空')
      }

      else {
        this.axios.post('/api/login', { userName: this.userName, userPwd: this.userPwd })
        .then(res => {
          console.log('res', res)
          if (res.data.message == 'ok') {
            this.$message('登录成功！')
            localStorage.setItem('token', res.data.user)
            localStorage.setItem('currentUser', JSON.stringify(res.data.data))//保存当前登录用户完整信息
            // let redirect = decodeURIComponent(this.$route.query.redirect || '/home')
            window.location.href = '/home'
            // this.$router.push({path:'/home'})

          }
        })
      }
    }
  }
}
</script>
<style lang="scss" >
.login {
  width: 500px;
  border: 1px solid #ccc;
  box-shadow: 4px 4px 5px;
  margin: 10px auto;
  padding-bottom: 30px;
}

.lh {
  line-height: 36px;
}

.btnlogin {
  width: 80%;
}

.el-row {
  margin-bottom: 50px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.d6 {
  text-align: center;
  font-size: 25px;
  font-family: "微软雅黑";

}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  text-align: center;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.d1 {
  position: relative;
  left: 150px;
  height: 48px;
  width: 200px;
}
</style>